<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title><%- register ? '新用户注册' : (edit ? '修改个人信息' : '浏览个人信息') %></title>
    <link rel='stylesheet' href='<%- rootUrl %>/res/adapter.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/res/taginput.css' />
    <style>
        .portraits {margin-left: 12px}
        .portraits img {width:60px; cursor: pointer; box-sizing: border-box }
        .portraits img:hover { border: 2px solid red }
    </style>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/res/adapter.js"></script>
    <script src="<%- rootUrl %>/res/taginput.js"></script>
</head>
<body class="body-margin">
<alljs-widget><message-top><%- message %></message-top></alljs-widget>
<div class="adapt-panel width-limit">
<form class="common-style auto-input-width" method="post" action="./signup" style="flex-grow:1;width:340px;" onsubmit="return submitCheck()" onkeypress="return event.keyCode !== 13" >
    <h2 style="display:inline;vertical-align: middle"><b><%- register ? '新用户注册' : (edit ? '修改个人信息' : '浏览个人信息') %><% if (!edit) { %>&emsp;<i class="fa fa-pencil" onclick="location.href='./useredit.html'" style="cursor:pointer;color:grey" ></i><% } %></b>
        <span style="font-size: 16px">
        <% if (!register){ %>
        <button class="button-likeA" onclick="location.href='./changePassword.html';return false;">修改密码</button>
        <% } %>
        <% if (isAdmin){ %>
        <button class="button-likeA" onclick="window.postRequest('./setrole', {user_id:'<%- _id %>', role:'admin'});return false;">升为管理员</button>
        <button class="button-likeA" onclick="window.postRequest('./setrole', {user_id:'<%- _id %>', role:'admin:<%- blockRoot %>'});return false;">升为子站管理员</button>
        <button class="button-likeA" onclick="window.postRequest('./setrole', {user_id:'<%- _id %>', role:''});return false;">降为普通用户</button>
        <button class="button-likeA" onclick="window.postRequest('./signforgetpassword', {host:'<%- _id %>', type:'userid'});return false;">修改密码链接</button>
        <button class="button-likeText" onclick="forbid('<%- _id %>');return false;" <%- status===1?'style="color:red"':'' %>/><i class="fa fa-ban"></i></button>
        <% } %>
        </span>
    </h2>
    <input type="hidden" name="_id" value="<%= _id %>" />
    <input type="hidden" id="portrait" name="portrait" value="<%= portrait %>" />
    <table>
        <tr><td colspan="2"><p><b>账户信息</b>&emsp;<span style="display:inline-block;color:gray;font-size: 11px">登录名,&nbsp;手机,&nbsp;邮箱&nbsp;请至少填1项</span>&nbsp;<i class="fa fa-info-circle" style="animation:flash-icon 2s forwards"></i></p></td></tr>
        <tr><td>登录名</td><td><input type="text" name="name" value="<%= name %>" />(必填&nbsp;1/3)</td></tr>
        <tr><td>手机</td><td><input type="text" name="phoneno" value="<%= phoneno %>" />(必填&nbsp;2/3)</td></tr>
        <tr><td>邮箱</td><td><input type="text" name="email" value="<%= email %>" />(必填&nbsp;3/3)</td></tr>
        <tr><td>昵称</td><td><input type="text" name="nickname" value="<%= nickname %>" /></td></tr>
        <tr>
            <td>性别</td>
            <td><select name="sex">
                <option value="" <%- sex==null ? 'selected' : '' %>></option>
                <option value="male" <%- sex=='male' ? 'selected' : '' %>>男</option>
                <option value="female" <%- sex=='female' ? 'selected' : '' %>>女</option>
            </select></td>
        </tr>
        <tr><td colspan="2"><hr/></td></tr>
        <% if (edit) { %>
        <tr><td>验证码</td><td><input type="text" name="captcha" style="width:25%" /><img id="captcha-img" style="vertical-align: middle; margin:5px" height="32" onclick="this.setAttribute('src','./captcha?'+new Date().getTime())" /></td></tr>
        <tr><td>登录密码(验证)</td><td>
            <input type="password" name="password" style="width:25%;vertical-align: middle" />
            <img src="<%- rootUrl %>/res/right2.gif" height="21" style="vertical-align: middle;margin:5px" />
            <input type="submit" value="保存编辑" style="vertical-align: middle" />
            <input type="button" value="放弃" style="vertical-align: middle" onclick="history.length > 0 ? history.go(-1) : close()" />
        </td></tr>
        <tr><td colspan="2"><hr/></td></tr>
        <% } %>
        <tr><td><p><b>个人信息</b></p></td></tr>
        <tr><td>首名(姓)</td><td><input type="text" name="firstname" value="<%= firstname %>" /></td></tr>
        <tr><td>尾名(名)</td><td><input type="text" name="lastname" value="<%= lastname %>" /></td></tr>
        <tr><td>生日</td><td><input type="date" name="birthday" style="font-size:10px;" value="<%= birthday %>" /></td></tr>
        <tr>
            <td>婚否</td>
            <td><select name="married">
                <option value="unset" <%- married==null ? 'selected' : '' %>></option>
                <option value="on" <%- married===true ? 'selected' : '' %>>已婚</option>
                <option value="off" <%- married===false ? 'selected' : '' %>>未婚</option>
            </select></td>
        </tr>
        <tr><td>职业</td><td><input type="text" name="occupation" value="<%= occupation %>" /></td></tr>
        <tr><td>爱好</td><td><input type="text" class="tag-input like-input" name="tags" value="<%= tags %>" placeholder=", ; 分隔多值" /></td></tr>
        <tr><td colspan="2"><hr/></td></tr>
        <tr id="details-splitter"><td colspan="2" style="background-color:gainsboro;padding:6px;font-size:small;font-weight:bold">以下选填&emsp;<i class="fa fa-chevron-down" onclick="switchDetail(this)" style="color:grey"></i></td></tr>
        <tr><td><p><b>所在地</b></p></td></tr>
        <tr><td>国</td><td><input type="text" name="country" value="<%= country %>" /></td></tr>
        <tr><td>省</td><td><input type="text" name="province" value="<%= province %>" /></td></tr>
        <tr><td>城市</td><td><input type="text" name="city" value="<%= city %>" /></td></tr>
        <tr><td>区县</td><td><input type="text" name="town" value="<%= town %>" /></td></tr>
        <tr><td>邮寄地址</td><td><textarea name="mailto" rows="4"><%- mailto %></textarea></td></tr>
        <tr><td colspan="2"><hr/></td></tr>
        <tr><td><p><b>公司信息</b></p></td></tr>
        <tr><td>公司名称</td><td><input type="text" name="company" value="<%= company %>" /></td></tr>
        <tr><td>公司邮寄地址</td><td><textarea name="mailtocompany" rows="4"><%- mailtocompany %></textarea></td></tr>
        <tr><td colspan="2"><hr/></td></tr>
        <tr><td><p><b>证件信息</b></p></td></tr>
        <tr>
            <td>证件类型</td>
            <% let crd = {"":"","身份证":"","出生证":"","通行证":"","护照签证":""}; crd[credentialtype]='selected' %>
            <td><select name="credentialtype">
                <option value="" <%- crd[''] %>></option>
                <option value="身份证" <%- crd['身份证'] %>>身份证</option>
                <option value="出生证" <%- crd['出生证'] %>>出生证</option>
                <option value="通行证" <%- crd['通行证'] %>>通行证</option>
                <option value="护照签证" <%- crd['护照签证'] %>>护照签证</option>
            </select></td>
        </tr>
        <tr><td>证件号码</td><td><input type="text" name="credentialcode" value="<%= credentialcode %>" /></td></tr>
    </table>
</form>
<div style="border:1px solid grey;padding:6px;margin:12px 0;flex-grow:0;align-self:flex-start">
    <h3 style="margin-left:12px">个人头像</h3>
    <% if (!register){ if (edit) { %>
    <hr/>
    <div class="portraits"></div>
    <div class="portraits"></div>
    <hr/>
    <iframe id="portraitFrame" src="<%- rootUrl %>/upResource.html?url=<%- portrait %>" style="width:269px; height:510px; border:0"></iframe>
    <% } else { %>
    <img src="<%- portrait %>" alt="<用户未设置头像>" />
    <% } } %>
</div>
</div>
<script>
var hidedetail=true;
var switchDetail = function(sender){
    if (hidedetail){
        $(sender).removeClass('fa-chevron-down');
        $(sender).addClass('fa-chevron-up');
        $(sender).parent().parent().nextAll().css('display', '');
        hidedetail=false;
    }else{
        $(sender).removeClass('fa-chevron-up');
        $(sender).addClass('fa-chevron-down');
        $(sender).parent().parent().nextAll().css('display', 'none');
        hidedetail=true;
    }
};
$('#details-splitter').nextAll().css('display', 'none');
for (let portraitid = 0; portraitid < 4; portraitid++)
    $('.portraits:first').append('<img src="'+rootUrl+'/res/portrait'+portraitid+'.png" />');
for (let portraitid = 4; portraitid < 8; portraitid++)
    $('.portraits:last').append('<img src="'+rootUrl+'/res/portrait'+portraitid+'.png" />');
$('.portraits').children('img').click(function(){ $('#portraitFrame').prop('src', rootUrl + '/upResource.html?url=' + $(this).prop('src')) })
</script>
<% if (edit) { %>
<script>
document.getElementById('captcha-img').onclick();
var submitCheck = function(){
    $('#portrait').val($('#portraitFrame')[0].contentWindow.contentUrl);

    let val = null;
    val = document.getElementsByName('captcha')[0].value;
    if (val.length === ''){
        showMessage('请输入验证码');
        return false;
    }
    val = document.getElementsByName('password')[0].value;
    if (val.length < 6){
        showMessage('密码最少6位');
        return false;
    }
    let name = document.getElementsByName('name')[0].value;
    let phoneno = document.getElementsByName('phoneno')[0].value;
    let email = document.getElementsByName('email')[0].value;
    if ((name == null || name.replace(/\s/g, '') === '') && (phoneno == null || phoneno.replace(/\s/g, '') === '') && (email == null || email.replace(/\s/g, '') === '')){
        showMessage('需要"用户名/手机/邮箱"至少一种');
        return false;
    }
    return true;
};
</script>
<% } else { %>
<script>
$(function(){
    setTimeout(function(){
        $('input').attr('readonly', 'readonly');
        $('textarea').attr('readonly', 'readonly');
        $('select').attr('onfocus', 'this.defaultIndex=this.selectedIndex;').attr('onchange', 'this.selectedIndex=this.defaultIndex;');
        $('.tag-input').children('span').children('button').attr('disabled', 'disabled');
    }, 100);
});
</script>
<% } %>
<% if (isAdmin){ %>
<script>
var forbid = function(id){
    window.postRequest('./deleteSomething', {col:'user',type:'forbid',filter:'{"_id":"'+id+'"}'});
}
</script>
<% } %>
</body>
</html>